<template>
  <div class="article-ranking-container">
    <el-card class="card-box">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in dynaamicData"
          :key="index"
          :label="item.label"
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-card>
    <el-table :data="list" ref="tableRef">
      <el-table-column
        v-for="(item, index) in tabColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.prop === 'publicDate'" #default="{ row }">
          <span>{{ $filters.relativeTime(row.publicDate) }}</span>
        </template>
        <template v-else-if="item.prop === 'action'" #default="{ row }">
          <el-button type="primary" size="mini" @click="look(row)">
            {{ $t('message.article.show') }}
          </el-button>
          <el-button type="danger" size="mini" @click="del(row)">{{
            $t('message.article.remove')
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 50, 100, 200]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, onActivated, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { articleList, delAarticle } from '@/api/article'
import { watchLangChange } from '@/utils/i18n'
import { dynaamicData, checkList, tabColumn } from './dynamic/index.js'
import { tableRef, initSortable } from './sorttable/index'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
const list = ref([])
const page = ref(1)
const size = ref(10)
const total = ref(0)
const getList = async () => {
  const resp = await articleList({ page: page.value, size: size.value })
  list.value = resp.list
  total.value = resp.total
  size.value = resp.size
  page.value = resp.page
}
getList()
onActivated(getList)
watchLangChange(getList)
onMounted(() => {
  initSortable(list, getList)
})
/**
 * size 改变触发
 */
const handleSizeChange = (currentSize) => {
  size.value = currentSize
  getList()
}

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  getList()
}
// 删除用户
const i18n = useI18n()
const router = useRouter()
const look = (row) => {
  router.push(`/article/${row._id}`)
}
const del = (row) => {
  ElMessageBox.confirm(
    i18n.t('message.article.dialogTitle1') +
      row.title +
      i18n.t('message.article.dialogTitle2'),
    {
      type: 'warning'
    }
  ).then(async () => {
    await delAarticle(row._id)
    ElMessage.success(i18n.t('message.article.removeSuccess'))
    // 重新渲染数据
    getList()
  })
}
</script>

<style lang="scss" scoped>
.article-ranking-container {
  .header {
    margin-bottom: 20px;
    .dynamic-box {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }

  ::v-deep .el-table__row {
    cursor: pointer;
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}

::v-deep .sortable-ghost {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
.card-box {
  margin-bottom: 20px;
}
::v-deep .sortable-ghost {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
</style>
